<!-- image -->
<template>
  <div class="ai-image">
    <div class="left">
      <div class="segmented">
        <el-segmented v-model="selectFuncType" :options="funcTypeOptions" />
      </div>
      <div class="modal-switch-container">
        <TextToTexture
          v-if="selectFuncType === AiCreateThreeDEnum.TEXT_TEXTURE"
          ref="textToTexture"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <TextTo3D
          v-if="selectFuncType === AiCreateThreeDEnum.TEXT_3D"
          ref="textTo3d"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <TextToVoxel
          v-if="selectFuncType === AiCreateThreeDEnum.TEXT_VOXEL"
          ref="textToVoxel"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <ImageTo3d
          v-if="selectFuncType === AiCreateThreeDEnum.IMAGE_3D"
          ref="imageTo3d"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />
      </div>
    </div>
    <div class="main">
      <ThreedList ref="threedListRef" platform="Meshy"
                  @on-regeneration="handleRegeneration"
                  @on-texture="handleTexture"
                  @on-refine="handleRefine"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import ThreedList from './components/ThreedList.vue'
import {AiCreateThreeDEnum, AiPlatformEnum} from '@/views/ai/utils/constants'
import TextToTexture from './components/texttotexture/index.vue'
import TextTo3D from './components/textto3d/index.vue'
import TextToVoxel from './components/texttovoxel/index.vue'
import ImageTo3d from './components/imageto3d/index.vue'
import {TextToRefineReqVO, ThreedApi, ThreedVO} from "@/api/ai/threed";
const message = useMessage()

const threedListRef = ref<any>() // threed 列表 ref
const textToTexture = ref<any>() // textToTexture(meshy.ai) ref
const textTo3d = ref<any>() // textTo3d(meshy.ai) ref
const textToVoxel = ref<any>() // textToVoxel(meshy.ai) ref
const imageTo3d = ref<any>() // imageTo3d(meshy.ai) ref

// 定义属性
const selectFuncType = ref(AiCreateThreeDEnum.TEXT_3D)
const funcTypeOptions = [
  {
    label: '文生模型',
    value: AiCreateThreeDEnum.TEXT_3D
  },
  {
    label: '文生三维',
    value: AiCreateThreeDEnum.TEXT_VOXEL
  },
  {
    label: '图生模型',
    value: AiCreateThreeDEnum.IMAGE_3D
  },
  {
    label: '文生纹理',
    value: AiCreateThreeDEnum.TEXT_TEXTURE
  },
]

/** 模型 start  */
const handleCreateStart = async () => {

}

/** 模型 complete */
const handleCreateComplete = async () => {
  await threedListRef.value.getThreedList()
}

/**  重新生成：将模型详情填充到对应平台  */
const handleRegeneration = async (threed:ThreedVO) => {
  // 根据不同平台填充 threed
  selectFuncType.value = threed.funcType;
  await nextTick()
  if (threed.funcType === AiCreateThreeDEnum.TEXT_TEXTURE) {
    textToTexture.value.settingValues(threed)
  } else if (threed.funcType === AiCreateThreeDEnum.TEXT_3D) {
    textTo3d.value.settingValues(threed)
  } else if (threed.funcType === AiCreateThreeDEnum.TEXT_VOXEL) {
    textToVoxel.value.settingValues(threed)
  }else if (threed.funcType === AiCreateThreeDEnum.IMAGE_3D) {
    imageTo3d.value.settingValues(threed)
  }
}

const handleTexture = async (threed:ThreedVO) =>{
  // 根据不同平台填充 threed
  selectFuncType.value = AiCreateThreeDEnum.TEXT_TEXTURE;
  await nextTick()
  await textToTexture.value.handleCreateThreedTexture(threed)
}


const handleRefine = async (threed: ThreedVO) => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中

    // 回调
    await handleCreateStart()
    const form = {
      platform: AiPlatformEnum.MESHY, // 平台
      model: AiPlatformEnum.MESHY, // 模型
      funcType: 'text_refine',
      previewTaskId: threed.taskId // 艺术样式
    } as TextToRefineReqVO
    // 发送请求
    await ThreedApi.generateModelToRefine(form)
  } finally {
    // 回调
    await handleCreateComplete()
    // 加载结束

  }
}
</script>

<style scoped lang="scss">
.ai-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .left {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 350px;

    .segmented {
      position: absolute;left: 0px; top: 10px;
    }

    .segmented .el-segmented {
      --el-border-radius-base: 16px;
      --el-segmented-item-selected-color: #fff;
      background-color: #ececec;
      width: 350px;
    }

    .modal-switch-container {
      height: 100%;
      overflow-y: auto;
      margin-top: 30px;
    }
  }

  .main {
    flex: 1;
    background-color: #fff;
  }

  .right {
    width: 350px;
    background-color: #f7f8fa;
  }
}
</style>
